<template>
  <div class="fire-box">
    <div class="pass-content">
      <div class="fireHead">
        <p class="pass-name">消防安全</p>
        <div class="well-Deployment"><i>当前部署</i><span>{{currentDeployment}}</span>/<span>{{needDeployment}}</span></div>
      </div>
      <!--消防分类占比-->
      <ul class="type-length">
        <li v-for="(item, i) in fireTypeData" :key="i" :style="{background: legendColor[i], width: chooseWidth(i)}"></li>
      </ul>
      <!--消防分类展示-->
      <div class="fire-legend">
        <div v-for="(item, i) in fireTypeData" :key="i"><span :style="{background: legendColor[i]}"></span><i>{{ item.name}}</i><b>{{item.num}}</b></div>
        <div class="fireCount"><span></span><i>总数</i><b>{{currentDeployment}}</b></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'peoplePass',
  data () {
    return {
      currentDeployment: 178, // 当前部署
      needDeployment: 230, // 需要部署的总数
      fireTypeData: [{ name: '消防栓', num: 98 }, { name: '消防泵', num: 62 }, { name: '消防通道', num: 18 }], // 消费类型数据
      boxW: 0,
      legendColor: ['#50E3C2', '#00A5ED', '#7ACEF4']
    }
  },
  mounted () {
    this.boxW = $('.type-length').width()
  },
  methods: {
    chooseColor (i) {
      return this.$base.getConst('common', 'colorMore')[i]
    },
    chooseWidth (i) {
      let w = (this.fireTypeData[i].num / this.currentDeployment) * (this.boxW - 20)
      return w + 'px'
    }
  }
}
</script>

<style scoped>
  .fire-box {
    width: 100%;
    margin-bottom: 10px;
  }

  .type-length {
    width: 100%;
    margin-top: 5px;
    /*height: 10px;*/
  }

  .type-length li {
    list-style: none;
    float: left;
    height: 10px;
    margin-bottom: 10px;
    margin-right: 2px;
  }

  .pass-content {
    background: rgba(43, 54, 72, 0.95);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
  }

  .pass-name {
    color: #fff;
    font-size: 14px;
    margin-bottom: 10px;
    float: left;
  }

  .fire-legend {
    height: 70px;
  }

  .fire-legend i {
    font-style: normal;
    color: #9FACC3;
    font-size: 12px;
  }

  .fire-legend b {
    float: right;
    font-size: 14px;
    color: #50E3C2;
    font-weight: normal;
  }

  .fire-legend span {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 8px;
    height: 8px;
    display: inline-block;
    /*float: left;*/
    margin-right: 9px;
  }

  .fire-legend div {
    width: 40%;
    line-height: 30px;
    color: #fff;
    margin-right: 10%;
    float: left;
  }

  .fireCount span {
    background: #C2C2C2;
  }

  .fireHead {
    overflow: hidden;
  }

  .well-Deployment {
    float: right;
    color: #50E3C2;
  }

  .well-Deployment i {
    font-size: 12px;
    color: #9FACC3;
    font-style: normal;
    letter-spacing: 0.4px;
    margin-right: 5px;
  }

  .well-Deployment span {
    font-size: 14px;
  }
</style>
